<template>
  <div class="container">
    <div class="tips-title">1.1 基本用法-默认</div>
    <el-slider v-model="value1"></el-slider>
    <div class="tips-title">1.2 基本用法-自定义初始值</div>
    <el-slider v-model="value2"></el-slider>
    <div class="tips-title">1.3 基本用法-隐藏 Tooltip</div>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
    <div class="tips-title">1.4 基本用法-格式化 Tooltip</div>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
    <el-slider v-model="value41" :format-tooltip="formatTooltip2"></el-slider>
    <div class="tips-title">1.5 基本用法-禁用</div>
    <el-slider v-model="value5" disabled></el-slider>
    <div class="tips-title">2.1 离散值-不显示间断点</div>
    <el-slider v-model="value6" :step="5"></el-slider>
    <div class="tips-title">2.2 离散值-显示间断点</div>
    <el-slider v-model="value7" :step="10" show-stops></el-slider>
    <div class="tips-title">3. 带有输入框</div>
    <el-slider v-model="value8" show-input></el-slider>
    <div class="tips-title">4. 范围选择</div>
    <el-slider v-model="value9" range show-stops :max="10"></el-slider>
    <div class="tips-title">5. 竖向模式</div>
    <el-slider v-model="value10" vertical height="200px"></el-slider>
  </div>
</template>
<script>
  export default {
    name: 'f-slider',
    data() {
      return {
        value1: 0,
        value2: 50,
        value3: 40,
        value4: 80,
        value41: 30,
        value5: 50,

        value6: 0,
        value7: 10,

        value8: 50,
        value9: [4, 8],

        value10: 0
      }
    },
    methods: {
      formatTooltip: function(val) {
        return val / 100;
      },
      formatTooltip2: function(val) {
        return val + "%";
      }
    }
  }
</script>
<style>

</style>

